import {defineComponent} from '../../src'
import * as _ from 'lodash'
import marked from 'marked'

export default defineComponent(props => {
    return {
        template: `
        <textarea ref="textarea" class="input" :value="input" @input="update"></textarea>
        <div class="output" v-html="compiledMarkdown"></div>
        `,
        data() {
            return {
                input: '',

                get compiledMarkdown() {
                    return marked(this.input)
                }
            }
        },
        methods: {
            update: _.debounce(function(){ 
                this.input = this.$refs.textarea.value
            })
        }
    }
})